const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const VueLoaderPlugin = require('vue-loader/dist/plugin');
module.exports ={
    mode: 'development',
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"index.js",
    },
    module:{
        rules:[
            // es6转es5loader
            {
                test: /\.js$/,
                loader:"babel-loader",
                exclude: /node_modules/,
            },
            // 图片加载loader
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000,
                },
            },
            // 加载字体loader
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
             },
            // 加载并编译vue单文件,vue2项目中vue-loader版本要低于等于15，否则不兼容报错Cannot read properties of undefined (reading ‘styles’)
             {
                test: /\.vue$/,
                loader: 'vue-loader'
             },
             {
                test: /\.css$/,
                // loader: 'style-loader!css-loader'
                use: ['style-loader', 'css-loader']
            },
        ],
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: 'vue-webpack',
            template: './src/index.html',
        }),
        // new VueLoaderPlugin(),
    ],
    devServer:{
        compress: true,
        port: 9000,
        // contentBase:"./dist"
    },
    resolve: {
        alias: {
           'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
        }
     }
};